<template>
  <div class="container">
    <!-- <h1>使用iframe标签来使用pdf</h1> -->
    <iframe :src="pdfUrl" width="100%" height="100%"></iframe>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import watermark from './mark'
interface Props {
  url: string; // PDF 文件地址
}
onMounted(()=>{
  const txt = "测试水印";
  watermark.set('张三1234567890')
}) 
const props = defineProps<Props>();
const pdfUrl = ref(""); // PDF.js 查看器的 URL

const fileUrl = "/web/viewer.html?file="; // PDF.js 查看器文件的路径

onMounted(() => {
  // 设置 iframe 的 src 属性，加载 PDF.js 查看器，并传递 PDF 文件的地址作为参数
  pdfUrl.value = fileUrl + encodeURIComponent(props.url);
});

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
}
</style>
